import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Router } from '@angular/router'

@Component({
  selector: 'app-sing-song',
  templateUrl: './sing-song.component.html',
  styleUrls: ['./sing-song.component.less']
})
export class SingSongComponent implements OnInit {

  public songList:Array<any> = []
  public searchWord:string = ""
  public pageSize:number = 10
  public pageIndex:number = 2
  public url:string =""
  public timer:any

  constructor(
    private http: HttpClient,
    private router: Router,
  ) { }

  ngOnInit(): void {
  }

  searchSong(){
    this.http.get(`http://localhost:3000/cloudsearch?keywords=${this.searchWord}`).toPromise()
    .then((data:any)=>{
      const songs = data.result.songs
      this.songList = songs
      console.log(this.songList);
    })
    .catch((err:any)=>{console.log('失败');}
    )
  }


  playSong(id:number){
    console.log(id);
    this.http.get(`http://localhost:3000/song/url?id=${id}`).toPromise()
    .then((data:any)=> {
      console.log(data);
      
      window.localStorage.removeItem("songUrl")
      window.localStorage.setItem('songUrl',data.data[0].url)
    })
    .catch((err:any)=>{console.log('失败');
    })
  
    this.http.get(`http://localhost:3000/song/detail?ids=${id}`).toPromise()
    .then((data:any)=> {
      console.log(data);
      window.localStorage.removeItem("audioImgUrl")
      window.localStorage.setItem("audioImgUrl",data.songs[0].al.picUrl)
      window.localStorage.removeItem("audioName")
      window.localStorage.setItem("audioName",data.songs[0].name)
    })
    .catch((err:any)=>{console.log('失败');
    })
    
  }
  
  getSongUrl(){
    setTimeout(() => {
    this.url = window.localStorage.getItem("songUrl")||""
    const audioImg:any = document.querySelector('.audioImg')
    audioImg.src = window.localStorage.getItem('audioImgUrl')||''
    const audioName:any = document.querySelector('#audioName')
    audioName.value = window.localStorage.getItem('audioName')||''
    }, 1000);
    
  }
  
  play(){
  setTimeout(() => {
    const mA:any = document.querySelector("#myAudio")
    const pT:any = document.querySelector("#playedTime")
    const done:any = document.querySelector(".done")
  
    mA.src=this.url
    if(mA.paused){
      mA.play();
        this.timer = setInterval(function(){
          let minute:any
          let second:any
          if(mA.currentTime<60){
            minute = "00"
            if(mA.currentTime<10){
              second = "0"+parseInt(mA.currentTime)
            }else
            second = parseInt(mA.currentTime)
          }
          else if(mA.currentTime>=60){
            minute = "0"+Math.floor(parseInt(mA.currentTime)/60)
            if(mA.currentTime%60<10){
              second = "0"+parseInt(mA.currentTime)%60
            }else
            second = parseInt(mA.currentTime)%60
          }
          done.style.width=(mA.currentTime/mA.duration)*100+"%"
          pT.value = minute+":"+second+"/"+"0"+Math.floor(parseInt(mA.duration)/60)+":"+parseInt(mA.duration)%60
        },1000)
  
  }else{
      mA.pause();
      clearInterval(this.timer)
  }
  }, 1500);
  
  }

}
